{include file='common/header'}

<style>
    .friend_area{ text-align: left; width: 300px; margin: 0 auto; height: 220px; overflow-y: scroll;
        overflow-x: hidden; }
    .friend_area li{ display: inline-block; width: 50px; height: 65px; padding: 5px; font-size: 14px; color: #666;
        text-align: center; background: white; }
    .name{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .head{ height: 50px; width: 50px; }
    .friend_area li img{ width: 100%; height: 100%; }
    input[type=checkbox]{ position: relative; top: 2px; }
    .notice{ width: 300px; margin: 0 auto; height: 25px; line-height: 25px; }
</style>

<div class="content">

    <div class="panel">
        <div class="logo"></div>
        <div class="sign">
            <h2>创建群组</h2>
            <form id="login_form">
                <input type="text" name="name" placeholder="群组名" />
                <textarea name="desc" placeholder="简介" ></textarea>
                <div class="notice">邀请联系人加入</div>
                <ul class="friend_area"></ul>
                <input type="button" class="btn_info" name="post" value="提交" />
            </form>
        </div>
    </div>

</div>

{include file='common/footer'}

<script language="JavaScript">
    $(function(){
        createFriendList();     //构建好友列表
    });

    function createFriendList(){
        var face, html = '';
        var data = parent.Im.session('friend_list');
        for(var i = 0; i < data.length; i++){
            face = data[i].face ? data[i].face : parent.USER_DEF_HEAD;
            html += '<li> <div class="head"><img title="'+data[i].nickname+'" src="'+face+'" /></div><div class="name">' +
                    '<input type="checkbox" value="'+data[i].username+'" name="user[]" />'+data[i].nickname+'</div>' +
                    '</li>';
        }
        $('.friend_area').append(html);
    }

    //创建群组
    $('input[name=post]').click(function(){
        var members = [];
        var name = $('input[name=name]').val();
        var desc = $('textarea[name=desc]').val();
        $('input:checkbox[name=user[]]:checked').each(function(){
            members.push($(this).val());
        });
        if(name.length <= 0){
            return layer.alert('房间名不能为空.', {icon:2});
        }
        var option = {
            subject: name,                       // 群名称
            description: desc,         // 群简介
            members: members,               // 以数组的形式存储需要加群的好友ID
            optionsPublic: true,                        // 允许任何人加入
            optionsModerate: false,                     // 加入需审批
            optionsMembersOnly: false,                  // 不允许任何人主动加入
            optionsAllowInvites: false                  // 允许群人员邀请
        };
        parent.Im.conn.createGroup(option);
        parent.layer.msg('创建成功.', function(){
            parent.location.reload();
        });
    });
</script>